<script setup>
import {
    Edit,
    Delete
} from '@element-plus/icons-vue'

import { ref, reactive } from 'vue'

// 搜索模型
const formInline = reactive({
    username: '',
    name: '',
    gender: '',
})

//文章列表数据模型
const people = ref([
    {
        id: 5,
        username: "陕西",
        password: 123243,
        name: "穗",
        gender: 1,
        image: "https://web-tlias800.oss-cn-beijing.aliyuncs.com/e19725fe-2cce-4d98-b61c-7a383a793e7d.png",
        sex: '女',
        phone: 1231432,
        money: 22312,
        role: 1,
        createTime: "2023-09-03 11:55:30",
        updateTime: "2023-09-03 11:55:30",
        roleinfo: ""
    },
    {
        id: 5,
        username: "陕西",
        password: 123243,
        name: "穗",
        gender: "女",
        sex: 1,
        image: "https://web-tlias800.oss-cn-beijing.aliyuncs.com/e19725fe-2cce-4d98-b61c-7a383a793e7d.png",
        phone: 1231432,
        money: 22312,
        role: 1,
        createTime: "2023-09-03 11:55:30",
        updateTime: "2023-09-03 11:55:30",
        roleinfo: ""
    },
    {
        id: 5,
        username: "陕西",
        password: 123243,
        name: "穗",
        gender: 1,
        sex: '女',
        image: "https://web-tlias800.oss-cn-beijing.aliyuncs.com/e19725fe-2cce-4d98-b61c-7a383a793e7d.png",
        phone: 1231432,
        money: 22312,
        role: 1,
        createTime: "2023-09-03 11:55:30",
        updateTime: "2023-09-03 11:55:30",
        roleinfo: ""
    },
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数

//  动态
import { userListService } from "@/api/user.js";

const peopleList = async () => {

    let params = {

        page: pageNum.value,
        pageSize: pageSize.value,
        username: formInline.username ? formInline.username : null,
        name: formInline.name ? formInline.name : null,
        gender: formInline.gender ? formInline.gender : null

    }

    let result = await userListService(params);

    console.log("返回结果:" + result)
    console.log(result)

    //渲染列表数据
    people.value = result.data.rows
    //渲染总条数
    total.value = result.data.total
    //  修改属性名字   管理员页面需要
    //为列表中添加sex，roleinfo 属性
    for (let i = 0; i < people.value.length; i++) {
        let info = people.value[i];
        for (let j = 0; j < people.value.length; j++) {
            if (info.gender === 0) {
                info.sex = '男'
            } else if (info.gender === 1 ) {
                info.sex = '女'
            }else{
                info.sex = ''
            }
            if (info.role === 0) {
                info.roleinfo = '管理员'
            } else if(info.role === 1){
                info.roleinfo = '用户'
            }
        }
    }
}

peopleList()

//  清空搜索栏
const clear = () => {
    formInline.name = ''
    formInline.username = ''
    formInline.gender = ''
}

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    peopleList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    peopleList()
}

</script>
<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>人员管理</span>
                <!-- <div class="extra">
                    <el-button type="primary">添加用户</el-button>
                </div> -->
            </div>
        </template>
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名称:">
                <el-input v-model="formInline.username" placeholder="用户名称" clearable />
            </el-form-item>
            <el-form-item label="姓名:">
                <el-input v-model="formInline.name" placeholder="姓名" clearable />
            </el-form-item>

            <el-form-item label="性别：">
                <el-select placeholder="请选择" v-model="formInline.gender" style="width: 240px;" clearable>
                    <el-option label="男" value="0"></el-option>
                    <el-option label="女" value="1"></el-option>
                    <!-- ● key的作用：提高重排效率，就地复用
                         :key="dict.id"//唯一值
                         :label="dict.name"//显示的值
                         :value="dict.id"//传给后台的值
                        -->
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="peopleList">搜索</el-button>
                <el-button @click="clear">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 文章列表 -->
        <el-table :data="people" style="width: 100%">
            <!-- <el-table-column label="用户编号" width="400" prop="id"></el-table-column> -->
            <el-table-column label="用户名" prop="username"></el-table-column>
            <!-- <el-table-column label="密码" prop="password"></el-table-column> -->
            <el-table-column label="姓名" prop="name"> </el-table-column>
            <el-table-column label="性别" prop="sex"></el-table-column>
            <el-table-column label="图像" prop="image">
                <template #default="{ row }">
                    <img :src=row.image alt="图片走丢了" style="height: 100px" />
                </template>
            </el-table-column>

            <el-table-column label="联系电话" prop="phone"></el-table-column>
            <el-table-column label="钱包" prop="money"></el-table-column>
            <el-table-column label="角色" prop="roleinfo"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="修改时间" prop="updateTime"></el-table-column>
            <!-- <el-table-column label="操作" width="100">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary"></el-button>
                    <el-button :icon="Delete" circle plain type="danger"></el-button>
                </template>
            </el-table-column> -->
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

    </el-card>
</template>
<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>